<template>
  <div>
    <Nav title="购物车">
      <div class="edit" @click="changeState">{{ change }}</div>
    </Nav>
    <!-- 购物车列表 -->
    <div class="container">
      <!-- 购物车为空 -->
      <div v-if="!item.length" class="no_shop">
        <div class="title">商品还是空的，快来挑选好货吧!</div>
        <div class="go" @click="$router.push('/home')">去逛逛</div>
      </div>
      <div class="shop" v-for="item in item" :key="item.id">
        <div class="shop_header">
          <div class="shop_left">
            <img src="../../assets/lion.png" alt="" />
            <span>苏宁自营</span>
          </div>
          <div class="shop_right">
            <span class="deep">还差82.57可免运费</span>
            <span class="tools">去凑单</span>
          </div>
        </div>
        <div class="shop_count">
          <div class="left">满减:&nbsp;&nbsp;</div>
          <div class="count">已享"满1件打6折"</div>
        </div>
        <div class="shop_content">
          <van-swipe-cell>
            <div class="shop_detail">
              <div class="content_left">
                <div class="checkbox" :class="{ checked: item.selected }">
                  <input
                    @change="selectChange(item.key, item.selected)"
                    v-model="item.selected"
                    type="checkbox"
                    class="checkbox_input"
                  />
                  <span class="am-checkbox-inner"></span>
                </div>
              </div>
              <div class="content_right">
                <van-card
                  :num="item.number"
                  :price="item.price"
                  desc="描述信息"
                  :title="item.name"
                  :thumb="item.pic"
                >
                  <template #footer>
                    <van-stepper
                      @change="numChange(item.key, item.number)"
                      theme="round"
                      button-size="22"
                      disable-input
                      v-model="item.number"
                    />
                  </template>
                </van-card>
              </div>
            </div>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="removeItem(item.key)"
              />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>
    <!-- 结算页面 -->
    <div class="settlement" v-if="item.length">
      <div class="left">
        <div class="checkbox" :class="{ checked: allcheck }">
          <input v-model="allcheck" type="checkbox" class="checkbox_input" />
          <span class="am-checkbox-inner"></span>
        </div>
        <span class="text">全部</span>
      </div>
      <div class="middle" v-show="middle">
        <div class="total">
          <span>合计:</span>
          <span class="price">￥{{ totals }}</span>
        </div>
        <div class="frieght">
          <div class="rote">
            <span>含运费:</span>
            <span>￥8.00</span>
            <i class="rote_img"></i>
          </div>
          <div class="member">
            <span>已优惠:</span>
            <span>￥9.47</span>
            <i class="member_img"></i>
          </div>
        </div>
      </div>
      <div class="right" @click="deleteALL()">
        <span>{{ chanageStatus }}</span>
        <span v-show="num">({{ number }})</span>
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import { fechCartStatus, modifyItemNum, itemStateChange, delItem } from '_api'
import { getToken } from '_utils/token.js'
import Nav from '../../components/Nav.vue'
import { Dialog, Toast } from 'vant'
import Tabbar from '../../components/Tabbar.vue'
export default {
  components: { Tabbar, Nav },
  data () {
    return {
      chanageStatus: '去结算',
      change: '编辑',
      item: [],
      number: 0,
      totals: 0,
      middle: true,
      num: true
    }
  },
  created () {
    this.fechCartStatus() // 购物车数据
  },
  methods: {
    // 获取购物车数据
    fechCartStatus () {
      fechCartStatus({
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          console.log(res)
          this.item = res.data.data.items
          this.totals = res.data.data.price
          this.number = res.data.data.number
        }
      })
    },

    // 修改购物数量
    numChange (key, number) {
      modifyItemNum({
        key,
        number,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.item = res.data.data.items
          this.totals = res.data.data.price
          this.number = res.data.data.number
        }
      })
    },

    // 修改购物车状态的改变
    selectChange (key, selected) {
      console.log(1)
      itemStateChange({
        key,
        selected,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.item = res.data.data.items
          this.totals = res.data.data.price
          this.number = res.data.data.number
        }
      })
    },

    // 删除商品
    removeItem (key) {
      Dialog.confirm({
        title: '提示',
        message: '确定删除宝贝吗'
      })
        .then(() => {
          delItem({
            key: key,
            token: getToken()
          }).then(res => {
            if (res.data.code === 0) {
              Toast('删除成功')
              this.item = res.data.data.items
              this.totals = res.data.data.price
              this.number = res.data.data.number
            }
            if (res.data.code === 700) {
              // 购物车没有商品
              Toast('删除成功')
              this.item = []
              this.totals = 0
              this.number = 0
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    // 改变状态
    changeState () {
      if (this.change === '编辑') {
        this.change = '完成'
        this.chanageStatus = '删除'
        this.num = false
        this.middle = false
      } else {
        this.change = '编辑'
        this.chanageStatus = '去结算'
        this.num = true
        this.middle = true
      }
    },

    deleteALL (key) {
      console.log(key)
      if (this.num === false) {
        let keySelect = []
        keySelect = this.item.filter(item => {
          return item.selected
        })
        let key = []
        keySelect.forEach(item => {
          key.push(item.key)
        })
        key = key.join(',')
        console.log(key)
        this.removeItem(key)

        // 当前被选中的key
      } else {
        this.$router.push('/order')
      }
    }
  },
  computed: {
    allcheck: {
      get () {
        return this.item.every(item => item.selected)
      },
      set (selected) {
        const key = []
        this.item.forEach(item => {
          key.push(item.key)
        })
        itemStateChange({
          key: key.join(','),
          selected,
          token: getToken()
        }).then(res => {
          if (res.data.code === 0) {
            this.item = res.data.data.items
            this.totals = res.data.data.price
            this.number = res.data.data.number
          }
        })
      }
    }
  },
  watch: {
    item (newVal) {
      this.$store.commit('cart/set_info', {
        item: this.item,
        number: this.number
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.edit {
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
  z-index: 1000;
  font-size: 0.373333rem;
  color: #3377ff;
}
//购物车底部
.settlement {
  height: 1.2rem;
  // line-height: 1.2rem;
  padding: 0 0.32rem;
  display: flex;
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 1.2rem;
  background-color: #fff;
  color: #000;
  border-top: 0.013333rem solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.checkbox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 0.24rem;
  height: 0.24rem;
}
.checkbox_input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  height: 100%;
  z-index: 2;
  border: 0 none;
  appearance: none;
}
.am-checkbox-inner {
  position: absolute;
  right: 0;
  width: 0.24rem;
  height: 0.24rem;
  border: 0.013333rem solid #ccc;
  border-radius: 9px;
  box-sizing: border-box;
}
.checkbox.checked {
  background-color: #ffcc00;
  background: url("../../assets/check.png") no-repeat;
  background-size: 100%;
}
.text {
  font-size: 0.373333rem;
  margin-left: 0.16rem;
}
.middle {
  flex: 1;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
.right {
  height: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.666667rem;
  background: #fc0;
  border-radius: 0.133333rem;
  color: #222;
  font-weight: 700;
  span {
    font-size: 0.373333rem;
  }
}
.total {
  line-height: normal;
  font-size: 0.373333rem;
  .price {
    color: #f42;
    font-size: 0.426667rem;
  }
}
.frieght {
  display: flex;
  font-size: 0.266667rem;
  color: #222;
  i {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    background: url("../../assets//qu-mark-1.png") no-repeat;
    background-size: cover;
    vertical-align: bottom;
  }
}
.rote {
  margin-right: 0.133333rem;
}

.container {
  padding: 0.32rem;
  padding-top: 1.226667rem;
  padding-bottom: 2.4rem;
  .shop {
    background-color: #fff;
    margin-bottom: 0.133333rem;
  }
}
.shop_header {
  display: flex;
  align-items: center;
  padding: 0.32rem 0.32rem 0.24rem 0;
  justify-content: space-between;
  .shop_left {
    img {
      display: inline-block;
      vertical-align: middle;
    }
    span {
      font-size: 26px;
      vertical-align: middle;
    }
  }
  .shop_right {
    font-size: 0.293333rem;
    .tools {
      margin-left: 0.133333rem;
      color: #f42;
    }
  }
}
.shop_count {
  padding: 0.173333rem 0.24rem;
  margin-left: 0.16rem;
  margin-right: 0.32rem;
  display: flex;
  justify-content: flex-start;
  background: #fffae5;
  border-radius: 0.133333rem;
  .left {
    font-size: 0.32rem;
    color: #222;
    font-weight: 700;
  }
  .count {
    font-size: 0.32rem;
    color: #000;
  }
}

.shop_content {
  position: relative;
  padding-top: 0.213333rem;
}
.shop_content::after {
  content: "";
  display: block;
  position: absolute;
  height: 1.24rem;
  border-left: 1px dashed #e7e7eb;
  left: 0.4rem;
  top: 0.026667rem;
}
.shop_detail {
  padding-right: 0.32rem;
  padding-bottom: 0.4rem;
  display: flex;
  .content_left {
    width: 0.8rem;
    height: 2.4rem;
    // background: chartreuse;
  }
}
.content_left {
  display: flex;
  justify-content: center;
  align-items: center;
}
.content_right {
  width: 100%;
  background: #fff;
}
.van-card {
  background: #fff;
}
.van-card__title {
  color: #222;
  font-weight: 700;
}
.rad_step {
  border-radius: 10px;
}

.delete-button {
  height: 100%;
}
/deep/ .van-button--danger {
  background-color: rgb(255, 102, 0);
}
.no_shop {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1.066667rem;
  .title {
    font-size: 0.373333rem;
    color: #666;
  }
  .go {
    margin-top: 0.4rem;
    width: 1.44rem;
    height: 0.64rem;
    border-radius: 0.133333rem;
    font-size: 0.32rem;
    text-align: center;
    line-height: 0.64rem;
    background: #fff;
    border-color: #ccc;
  }
}
</style>
